<div class="mb-2 row">
  <div class="col-md-6 col-xs-12 d-flex">
    <div
      class="align-items-center d-flex flex-grow-1 h5 mb-0 py-2 text-truncate"
    >
      <span i18n>Performance</span>
      @if (user?.subscription?.type === 'Basic') {
        <gf-premium-indicator class="ml-1" />
      }
    </div>
  </div>
  <div class="col-md-6 col-xs-12 d-flex justify-content-end">
    <mat-form-field
      appearance="outline"
      class="w-100 without-hint"
      color="accent"
    >
      <mat-label i18n>Compare with...</mat-label>
      <mat-select
        name="benchmark"
        [disabled]="user?.subscription?.type === 'Basic'"
        [value]="benchmark?.id"
        (selectionChange)="onChangeBenchmark($event.value)"
      >
        <mat-option [value]="null" />
        @for (symbolProfile of benchmarks; track symbolProfile) {
          <mat-option [value]="symbolProfile.id">{{
            symbolProfile.name
          }}</mat-option>
        }
        @if (hasPermissionToAccessAdminControl) {
          <mat-option [routerLink]="routerLinkAdminControlMarketData">
            <div class="align-items-center d-flex">
              <ion-icon class="mr-2 text-muted" name="arrow-forward-outline" />
              <span i18n>Manage Benchmarks</span>
            </div>
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="chart-container">
  @if (isLoading) {
    <ngx-skeleton-loader
      animation="pulse"
      [theme]="{
        height: '100%',
        width: '100%'
      }"
    />
  }
  <canvas
    #chartCanvas
    class="h-100"
    [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
  ></canvas>
</div>
